Google Maps API ব্যবহার করে আপনি Polyline, Polygon, Circle, এবং Rectangle তৈরি করতে পারেন, যা মানচিত্রে নির্দিষ্ট এলাকা চিহ্নিত বা আঁকতে সাহায্য করে। এই উপাদানগুলি সাধারণত স্থানিক ডেটা বা বিভিন্ন জ্যামিতিক আকৃতি প্রদর্শন করার জন্য ব্যবহৃত হয়।
এখানে আপনি শিখবেন কিভাবে এগুলি ব্যবহার করা যায় এবং এগুলোর বিভিন্ন কনফিগারেশন কীভাবে মানচিত্রে বাস্তবায়ন করা হয়।
1. Polyline (পলিলাইন)
Polyline হল একাধিক সংযুক্ত সরল রেখা, যা সাধারণত দুটি বা ততোধিক পয়েন্টের মধ্যে সংযোগের জন্য ব্যবহৃত হয়। এটি বিশেষভাবে যাতায়াত বা রাস্তা দেখানোর জন্য ব্যবহৃত হতে পারে।
Polyline উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Polyline Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Google Maps Polyline Example</h3>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 23.8103, lng: 90.4125}, // ঢাকার কেন্দ্র
});
var flightPath = new google.maps.Polyline({
path: [
{lat: 23.8103, lng: 90.4125}, // শুরু পয়েন্ট
{lat: 23.8150, lng: 90.4200}, // মধ্যবিন্দু
{lat: 23.8200, lng: 90.4250} // গন্তব্য
],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</body>
</html>
ব্যাখ্যা:
- path: Polyline এর পয়েন্টের তালিকা (lat, lng) হিসাবে দেওয়া হয়।
- strokeColor: Polyline এর রঙ নির্ধারণ করা হয়।
- strokeOpacity: Polyline এর স্বচ্ছতা নিয়ন্ত্রণ করা হয়।
- strokeWeight: Polyline এর প্রস্থ নির্ধারণ করা হয়।
2. Polygon (পলিগন)
Polygon হল একটি বন্ধ রেখাচিত্র (closed shape) যা একাধিক পয়েন্টের মাধ্যমে তৈরি হয়। এটি সাধারণত একটি এলাকা চিহ্নিত করার জন্য ব্যবহৃত হয়, যেমন কোনো পার্ক বা অঞ্চলের সীমানা।
Polygon উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Polygon Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Google Maps Polygon Example</h3>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 23.8103, lng: 90.4125}, // ঢাকার কেন্দ্র
});
var area = new google.maps.Polygon({
paths: [
{lat: 23.8103, lng: 90.4125},
{lat: 23.8150, lng: 90.4200},
{lat: 23.8200, lng: 90.4150},
{lat: 23.8150, lng: 90.4100}
],
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00FF00',
fillOpacity: 0.35
});
area.setMap(map);
}
</script>
</body>
</html>
ব্যাখ্যা:
- paths: Polygon এর পয়েন্টগুলোর তালিকা (lat, lng)।
- strokeColor: Polygon এর বাইরের রেখার রঙ।
- fillColor: Polygon এর অভ্যন্তরের রঙ।
- fillOpacity: Polygon এর অভ্যন্তরের স্বচ্ছতা।
- strokeOpacity: বাইরের রেখার স্বচ্ছতা।
3. Circle (সার্কেল)
Circle একটি বৃত্তাকার আকৃতি যা একটি কেন্দ্রবিন্দু এবং এর চারপাশের ব্যাসার্ধের মাধ্যমে চিহ্নিত করা হয়। এটি সাধারণত একটি এলাকা প্রদর্শনের জন্য ব্যবহৃত হয়, যেমন একটি নির্দিষ্ট রেডিয়াসে সেবা প্রদান করা।
Circle উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Circle Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Google Maps Circle Example</h3>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 23.8103, lng: 90.4125}, // ঢাকার কেন্দ্র
});
var circle = new google.maps.Circle({
map: map,
center: {lat: 23.8103, lng: 90.4125},
radius: 5000, // 5 কিলোমিটার রেডিয়াস
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
}
</script>
</body>
</html>
ব্যাখ্যা:
- center: Circle এর কেন্দ্রবিন্দু (lat, lng)।
- radius: Circle এর ব্যাসার্ধ (মিটার হিসেবে)।
- strokeColor: Circle এর বাইরের রেখার রঙ।
- fillColor: Circle এর অভ্যন্তরের রঙ।
4. Rectangle (রেকটেঙ্গল)
Rectangle হল একটি আয়তাকার আকৃতি, যা দুটি বিপরীত কোণের মাধ্যমে তৈরি হয়। এটি সাধারণত কোন এলাকা বা জায়গার সীমানা চিহ্নিত করার জন্য ব্যবহৃত হয়।
Rectangle উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Rectangle Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Google Maps Rectangle Example</h3>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 23.8103, lng: 90.4125}, // ঢাকার কেন্দ্র
});
var bounds = {
north: 23.8200,
south: 23.8000,
east: 90.4200,
west: 90.4000
};
var rectangle = new google.maps.Rectangle({
bounds: bounds,
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00FF00',
fillOpacity: 0.35
});
rectangle.setMap(map);
}
</script>
</body>
</html>
ব্যাখ্যা:
- bounds: Rectangle এর উত্তর, দক্ষিণ, পূর্ব, পশ্চিম সীমানা নির্ধারণ করে (north, south, east, west)।
- strokeColor: Rectangle এর বাইরের রেখার রঙ।
- fillColor: Rectangle এর অভ্যন্তরের রঙ।
সারাংশ
Google Maps API তে Polyline, Polygon, Circle, এবং Rectangle এর মাধ্যমে আপনি বিভিন্ন জ্যামিতিক আকৃতি এবং সীমানা মানচিত্রে চিহ্নিত করতে পারেন। এগুলি অনেক কাজে আসতে পারে, যেমন সড়ক বা রুটের চিহ্নিতকরণ, এলাকা বা অঞ্চল চিহ্নিতকরণ, বা যেকোনো নির্দিষ্ট এলাকার সীমানা এবং রেডিয়াস দেখানোর জন্য।
Read more
